<template>
	<view class="group-oil">
		<view class="oil-top">
			<view class="top-one">
				<!-- logo -->
				<view class="top-tops">
					<view class="tops-img">
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
					<view class="tops-tit">
						<h3>团又放心加.加油有保险 </h3>
						<p>品质保障 | 加油保险 | 先行赔付 </p>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="switchSign"></view>
				<view class="search-box"   @click="jumpSearch()" :class="{'flex-top':topfixed==1}">
					<view class="top-search flex" :class="{'topfixed-active':topfixed==1}">
						<view class="search-left">
							<view class="search-img">
								<image src="../../static/search.png" mode="widthFix"></image>
							</view>
							<p class="search-font">搜索油站</p>
						</view>
						<view class="search-butt">搜索</view>
					</view>

				</view>
				<!-- swiper 滑动框 -->
				<view class="uni-margin-wrap banner">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-color='#ccc' indicator-active-color='#fff'>
						<swiper-item v-for="(item,index) in banerSweiper" :key="index" @click="jumpBnner(item.id)">
							<view class="swiper-item uni-bg-red">
								<image :src="item.src" mode="widthFix"></image>
							</view>
						</swiper-item>

					</swiper>
				</view>
				<!-- 省钱会员 -->
				<view class="top-list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H " v-for="(item,index) in saveMoney" :key="item.id"
							@click='jumpSave(item.id)'>
							<dl class='list-cont'>
								<dt>
									<image :src="item.src" mode="widthFix"></image>
								</dt>
								<dd>{{item.title}}</dd>
							</dl>
						</view>
						<!-- <view class="demo2"></view> -->
					</scroll-view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="top-coupon flex">
				<view class="coupon-img" v-for="(item,index) in coupon" :key="item.id">
					<image :src="item.src" mode="widthFix"></image>
				</view>
			</view>
			<!-- 精选 -->
			<view class="top-selected  flex">
				<!-- 头部标题 -->
				<!-- <view class="switchSign2"></view>  :class="{'flex-sele':topfixed2==1}" -->
				<view class="sele-title">
					<view class="selected-top flex" :class="{'flex-top1':topfixed1==1}">
						<view class="selected-title">
							<p>精选</p>
							<p>筛选</p>
							<p>排序</p>
						</view>
						<view class="selected-standard flex">
							<view class="stan" v-for="(item,index) in standard " :key="item.id">{{item.tit}}</view>
						</view>
					</view>
					<view class="selected-center ">
						<view :class="[current == index ? 'active': '']" v-for="(item,index) in preferred" :key="index"
							@click="optionsToggle(index)">
							{{item}}
						</view>
					</view>
				</view>
				<!-- 内容 -->
				<view class="selected-bottom ">
					<view class="gas-station" v-for="(item,index) in gasStation" :key="index" v-show="index==current" @click="getDeatil(index)">
						<view class="gas-stations" v-for="(items,indexs) in item">
							<view class="stations-top">
								<view class="sta-left-name ">
									<view class="sta-left-names">{{items.gasName}}</view>
									<view class="sta-left-yx">优选</view>
								</view>
								<view class="flex">
									<view class="sta-left-posi">
										{{items.position}}
									</view>
									<view class="sta-left-kilo">
										{{items.distance}}
									</view>
								</view>
								<view class="sta-price">
									<view class="sta-price-new">
										￥ <text class="big">{{items.price}}</text>/L
									</view>
									<view class="sta-price-older">
										{{items.originalPrice}}
									</view>
								</view>
								<view class="sta-bottom flex">
									<view class="bot-left">
										<view class="left-top">完单返加油金 <text>{{items.rebate}}</text> /升</view>
										<view class="bot-bot">{{items.accumulate}}</view>
									</view>
									<view class="bot-right">立即加油</view>
								</view>

							</view>
						</view>

					</view>

				</view>
			</view>
		</view>




	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//banner滑动
				banerSweiper: [{
						id: 1,
						src: '../../static/banner1.png'
					},
					{
						id: 2,
						src: '../../static/banner2.png'
					},
					{
						id: 3,
						src: '../../static/banner3.png'
					}
				],
				indicatorDots: true,
				autoplay: true,
				indicatorDots2: false,
				autoplay2: false,
				interval: 2000,
				duration: 500,
				value: '',
				// 搜索
				topfixed: 0,
				topfixed2:0,
				topfixed1:0,

				// 省钱
				saveMoney: [{
						id: 1,
						src: '../../static/团油养车.png',
						title: '团油养车'
					},
					{
						id: 2,
						src: '../../static/list1.png',
						title: '省钱会员'
					},
					{
						id: 3,
						src: '../../static/list2.png',
						title: '签到'
					},
					{
						id: 4,
						src: '../../static/list3.png',
						title: '认证有奖'
					},
					{
						id: 5,
						src: '../../static/list4.png',
						title: '转盘抽奖'
					},
					{
						id: 6,
						src: '../../static/list5.png',
						title: '外卖红包'
					},
					{
						id: 7,
						src: '../../static/list6.png',
						title: '重要信息'
					},
				],
				// 优惠券
				coupon: [{
						id: 1,
						src: '../../static/youhui.png'
					},
					{
						id: 2,
						src: '../../static/youhui2.png'
					}
				],
				// 精选
				standard: [{
						id: 1,
						tit: '92#筛选'
					},
					{
						id: 2,
						tit: '智能排序'
					}
				],
				// 团油优选
				current: 0,
				preferred: ['团油优选', '多加多送', '加油返券', '免费洗车'],
				// 加油站
				gasStation: [
					[{
						id:'1',
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{id:'2',
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'3',
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'4',
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'5',
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{id:'6',
							gasName: '金城加油站（济南）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{id:'7',
							gasName: '小海豚加油站（桃花峪站）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45L',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'8',
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'9',
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {id:'10',
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{id:'11',
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88/L',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],

				]

			}
		},
		// 页面滚动
		onPageScroll(res) {
			var _this = this
			var temptop;
			const query = uni.createSelectorQuery();
			query.select('.switchSign').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function(res) {
				res[0].top // .switchSign节点距离上边界的坐标
				res[1].scrollTop // 显示区域的竖直滚动位置
				temptop = res[0].top;
				if (temptop <= '2') {
					_this.topfixed = 1;
					_this.topfixed1 = 1;
				} else {
					_this.topfixed = 0;
					_this.topfixed1 = 0;
				}
			})
		},
		onLoad() {},
		// 定义方法
		methods: {
			// 跳转到搜索页
			jumpSearch: function() {
				uni.navigateTo({
					url: '/pages/index/search',
					success:res=>{
						console.log(11)
					}
				})
			},
			// banner跳转
			jumpBnner:function(id){
				if( id ==1 ){
				uni.switchTab({
					// 省钱专区
					url:'/pages/save/save'
				})
				}else if( id == 2 ){
					uni.navigateTo({
						// 福利中心
						url:'/pages/mine/mine-check'
					})
				}else{
					uni.navigateTo({
						// 团油养车
						url:'/pages/index/car'
					})
				}
			},
			getDeatil:function(index){
				uni.navigateTo({
					url: '/pages/index/selected-details',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 省钱专区跳转页面
			jumpSave: function(id) {
				console.log(id)
				if(id == 1 ){
					uni.navigateTo({
						url: '/pages/index/car',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if(id == 2){
					uni.navigateTo({
						url: '/pages/mine/member',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else if(id == 3){
					uni.navigateTo({
						url: '/pages/mine/mine-check',
						
					});
				}else if(id == 4){
					uni.navigateTo({
						url: '/pages/index/authentication',
						
					});
				}else if(id == 5){
					uni.navigateTo({
						url: '/pages/index/cj',
						
					});
				}else if(id == 6){
					uni.navigateTo({
						url: '/pages/index/take',
						
					});
				}else{
					uni.navigateTo({
						url: '/pages/index/notice',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
			},
			// 精选选项切换
			optionsToggle: function(index) {
				this.current = index
			},



		}
	}
</script>
<!-- 引用样式 -->
<style>
	@import url("index.css");
</style>
